
<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="/home" class="my-top-nav-item">
      <router-link :to="{ name: 'home' }" tag="a">首页</router-link>
    </el-menu-item>
    <el-menu-item index="/programming" class="my-top-nav-item">
      <router-link :to="{ name: 'programming' }" tag="a">编程</router-link>
    </el-menu-item>
    <el-menu-item index="/interests" class="my-top-nav-item">
      <router-link :to="{ name: 'interests' }" tag="a">兴趣</router-link>
    </el-menu-item>
    <el-menu-item index="/entertainment" class="my-top-nav-item">
      <router-link :to="{ name: 'entertainment' }" tag="a">娱乐</router-link>
    </el-menu-item>
    <el-menu-item index="/others" class="my-top-nav-item">
      <router-link :to="{ name: 'others' }" tag="a">其他</router-link>
    </el-menu-item>
    <el-menu-item index="searchForm" class="my-top-nav-item" v-show="showForm">
      <!-- <search-form :searchType="searchType" :keywords="keywords" :search="search" ></search-form> -->
      <search-form :form="form" :search="search" ></search-form>
    </el-menu-item>
    <el-menu-item index="/admin" class="my-top-nav-item" style="color:#545c64">
      <router-link :to="{ name: 'admin' }">管理界面</router-link>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { onMounted, ref,defineComponent, reactive,  } from 'vue';
import SearchForm from './SearchForm.vue';
import {useRouter} from 'vue-router'
import bus from '../utils'
export default defineComponent({
  components:{SearchForm},
  setup() {
    const activeIndex = ref(null)
    const handleSelect = (key, keyPath) => {
      if(key != "searchForm") activeIndex.value = key
    }

    function getActiveIndex() {
      activeIndex.value = localStorage.getItem("currentPath")
    }
    
    const router = useRouter()
    const showForm = ref(true)
    const form = ref({
      searchType:'title',
      keywords:''
    })
    // const searchType = ref('title')
    // const keywords = ref('')
    const search = ()=>{
      console.log("keywords", form.value.keywords)
        if(form.value.keywords == '') return
        router.push({
            name:'articleSearch',
            params:{
                keywords:form.value.keywords,
                searchType:form.value.searchType
            }
        })
        showForm.value = false
    }

    onMounted(() => {
      bus.on("showSearchForm", val=>{
        showForm.value=val
      })
      getActiveIndex()
      window.addEventListener('setItemEvent', (e)=>{
        activeIndex.value = e.currentPath
      })
    })

    return {
      activeIndex, handleSelect, search,showForm, form
      // searchType, keywords
    }
  }
})
</script>

<style>
.my-top-nav-item{
  font-weight: bold;
}
</style>
